<html>
  <head>
    <title>SIMILE Widgets | Exhibit | Examples | Billionaires</title>
    <link rel='stylesheet' href='../../api/styles/common.css' type='text/css' />
    
    <link href="billionaires.js" type="application/json" rel="exhibit/data" />
    
    <!-- Replace the URL here with http://api.simile-widgets.org/exhibit/2.2.0/exhibit-api.js -->
    <script src="../../api/exhibit-api.js"></script>
    
    <!-- Replace the URL here with http://api.simile-widgets.org/exhibit/2.2.0/extensions/map/map-extension.js -->
    <script src="../../api/extensions/map/map-extension.js?gmapkey=ABQIAAAA5JLLfCE9c7HAtg25QM2KCRRyiP6mHEsQpwvxB19-hS9Kgd8RYhSXEtJVAXDUCZPqwtZZi7-HUYUYrw"></script>
    
    <link rel='stylesheet' href='styles.css' type='text/css' />
  </head>
  <body>
    <ul id="path">
      <li><img src="../../images/left_arrow_img.png" onclick="window.qml.showExampleChooser();"/></li>
      <li><input type="checkbox" onclick="window.qml.enableScroll(this.checked);"
		 class="flickable-checkbox"><span  onclick="(function() { var chk = SimileAjax.jQuery('input.flickable-checkbox')[0]; chk.click(); })();">Flickable??</span></input></li>
      <li><large>Billionaires...</large></li>
    </ul>

    <table id="frame"><tr>
        <td id="main-content">
<!--        <h1>Billionaires in History</h1>
-->
            <div ex:role="coder" id="wealth-coder"
                ex:coderClass="SizeGradient" 
                ex:gradientPoints="0, 15; 200, 70">
            </div>
        
            <div ex:role="viewPanel">
                <div ex:role="view"
                    ex:viewClass="Map"
                    ex:label="Where They Are From"
                    ex:latlng=".latLng"
                    ex:sizeKey=".wealth"
                    ex:sizeCoder="wealth-coder"
                    ex:bubbleWidth="200"
                    ex:bubbleHeight="200"
                    ex:mapHeight="500"
                    ex:sizeLegendLabel="Wealth in Billion USD"
                    >
                    <div class="map-lens" ex:role="lens" style="display: none;">
                        <div><b ex:content=".label"></b>
                            <span ex:if-exists=".origin">from <span ex:content=".origin"></span></span>
                        </div>
                        <div><span ex:content=".wealth"></span> billions USD</div>
                        <div>Company: <span ex:content=".company"></span></div>
                    </div>
                </div>
                <div ex:role="view"
                    ex:viewClass="Tabular"
                    ex:label="Compare Their Wealth"
                    ex:columns=".number, .label, .ageAtPeak, .wealth, .origin, .origin-country, .company"
                    ex:columnLabels="rank, name, age at peak, wealth in billion USD, origin, country of origin, company"
                    ex:sortColumn="0"
                    ex:sortAscending="true"
                    ></div>
            </div>
        </td>
        <td id="sidebar">
            <div ex:role="facet" ex:facetClass="TextSearch" facetLabel="Search"></div>
            <hr/>
            <div ex:role="facet" ex:expression=".company" ex:facetLabel="Companies" ex:height="15em"></div>
            <div ex:role="facet" ex:expression=".origin-country" ex:facetLabel="Countries of Origin" ex:height="20em"></div>
        
        
            <div style="text-align: center; margin: 2em;">
                <div ex:role="logo" ex:color="Azure"></div>
                <a href="billionaires.js" target="_blank">get data file</a>
            </div>
        </td>
    </tr></table>
  </body>
</html>
